import Image from 'next/image'
import Link from 'next/link'

const featuredSpots = [
  {
    id: 1,
    name: '西湖',
    description: '西湖，位于浙江省杭州市西湖区龙井路1号，是中国大陆首个世界文化遗产。',
    imageUrl: '/images/spots/xihu.jpg',
    price: 80,
  },
  {
    id: 2,
    name: '故宫',
    description: '故宫是中国明清两代的皇家宫殿，位于北京中轴线的中心。',
    imageUrl: '/images/spots/forbidden-city.jpg',
    price: 120,
  },
  {
    id: 3,
    name: '长城',
    description: '万里长城是中国古代的伟大建筑之一，也是世界文化遗产。',
    imageUrl: '/images/spots/great-wall.jpg',
    price: 100,
  }
]

export default function Home() {
  return (
    <div className="bg-white">
      <div className="relative h-[600px]">
        {/* 背景图片 */}
        <div className="absolute inset-0">
          <Image
            src="/images/spots/home-bg.jpg"
            alt="Background"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-black/40" />
        </div>

        <div className="mx-auto max-w-7xl">
          <div className="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
            <div className="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0">
              <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
                <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
                  发现美好旅程
                </h1>
                <p className="mt-6 text-lg leading-8 text-gray-100">
                  探索世界各地的美景，预订心仪的景点门票，开启您的完美旅程。
                </p>
                <div className="mt-10 flex items-center gap-x-6">
                  <Link
                    href="/spots"
                    className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                  >
                    浏览景点
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 热门景点 */}
      <div className="relative">
        <div className="absolute inset-0 bg-gradient-to-b from-black/5 to-transparent h-32" />
        <div className="mx-auto max-w-7xl px-6 lg:px-8 py-24 sm:py-32">
          <div className="mx-auto max-w-2xl lg:max-w-none">
            <h2 className="text-2xl font-bold tracking-tight text-gray-900">热门景点</h2>

            <div className="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-6 lg:space-y-0">
              {featuredSpots.map((spot) => (
                <div key={spot.id} className="group relative">
                  <div className="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
                    <Image
                      src={spot.imageUrl}
                      alt={spot.name}
                      className="h-full w-full object-cover object-center"
                      width={500}
                      height={300}
                    />
                  </div>
                  <h3 className="mt-6 text-sm text-gray-500">
                    <Link href={`/spots/${spot.id}`}>
                      <span className="absolute inset-0" />
                      {spot.name}
                    </Link>
                  </h3>
                  <p className="text-base font-semibold text-gray-900">¥{spot.price}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
} 